<template>
    <div>
        <!-- header -->
        <div class="row justify-between">
          <div>a</div>
          <div>2</div>
        </div>

        <swiper
          :pagination="{
            dynamicBullets: true,
          }"
          :loop="true"
          :autoplay="{delay: 3000, disableOnInteraction: false}"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
          :modules="modules"
        >
            <swiper-slide class="full-width e-height-180" v-for="(item, index) in 5" :key="index">Slide {{index}}</swiper-slide>
        </swiper>

        <!-- buttom -->
        <div>buttom</div>
    </div>
</template>

<script>
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { Autoplay, Pagination } from 'swiper/modules';
  import 'swiper/css/pagination';

  // Import Swiper styles
  import 'swiper/css';

  export default {
    components: {
        Swiper,
        SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        modules: [Autoplay, Pagination],
        onSwiper,
        onSlideChange,
      };
    },
  };
</script>

<style lang="postcss" scoped>
/* 样式 */
</style>